<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>State Color - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
    <style>
        .background-demo span{
            display: inline-block;
            width: 100px;
            height: 20px;
            box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
        }
    </style>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    为方便使用状态色，提供了文字颜色、背景色等工具
                </div>
            </div>
        </div>
    </div>

    <form class="e-form">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-head">
                        <div class="card-head-label">
                            <h3 class="card-head-title">
                                Color
                            </h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>class</th>
                                <th>示例</th>
                                <th>说明</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><code>e-font-brand</code></td>
                                <td>
                                    <span class="e-font-brand">Easy Frame</span>
                                </td>
                                <td>设置文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-light</code></td>
                                <td>
                                    <span class="e-font-light e-bg-dark">Easy Frame</span>
                                </td>
                                <td>设置文字颜色，由于文字是白色，这里添加了深色背景</td>
                            </tr>
                            <tr>
                                <td><code>e-font-dark</code></td>
                                <td>
                                    <span class="e-font-dark">Easy Frame</span>
                                </td>
                                <td>设置文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-primary</code></td>
                                <td>
                                    <span class="e-font-primary">Easy Frame</span>
                                </td>
                                <td>设置文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-success</code></td>
                                <td>
                                    <span class="e-font-success">Easy Frame</span>
                                </td>
                                <td>设置文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-info</code></td>
                                <td>
                                    <span class="e-font-info">Easy Frame</span>
                                </td>
                                <td>设置文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-warning</code></td>
                                <td>
                                    <span class="e-font-warning">Easy Frame</span>
                                </td>
                                <td>设置文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-danger</code></td>
                                <td>
                                    <span class="e-font-danger">Easy Frame</span>
                                </td>
                                <td>设置文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-invalid</code></td>
                                <td>
                                    <span class="e-font-invalid">Easy Frame</span>
                                </td>
                                <td>设置文字颜色</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-head">
                        <div class="card-head-label">
                            <h3 class="card-head-title">
                                Color & Hover
                            </h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>class</th>
                                <th>示例</th>
                                <th>说明</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><code>e-font-brand</code></td>
                                <td>
                                    <a href="#" class="e-font-brand e-font-hover-brand">Easy Frame</a>
                                </td>
                                <td>设置:hover时文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-light</code></td>
                                <td>
                                    <a href="#" class="e-font-light e-font-hover-light e-bg-dark">Easy Frame</a>
                                </td>
                                <td>设置:hover时文字颜色，由于文字是白色，这里添加了深色背景</td>
                            </tr>
                            <tr>
                                <td><code>e-font-dark</code></td>
                                <td>
                                    <a href="#" class="e-font-dark e-font-hover-dark">Easy Frame</a>
                                </td>
                                <td>设置:hover时文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-primary</code></td>
                                <td>
                                    <a href="#" class="e-font-primary e-font-hover-primary">Easy Frame</a>
                                </td>
                                <td>设置:hover时文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-success</code></td>
                                <td>
                                    <a href="#" class="e-font-success e-font-hover-success">Easy Frame</a>
                                </td>
                                <td>设置:hover时文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-info</code></td>
                                <td>
                                    <a href="#" class="e-font-info e-font-hover-info">Easy Frame</a>
                                </td>
                                <td>设置:hover时文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-warning</code></td>
                                <td>
                                    <a href="#" class="e-font-warning e-font-hover-warning">Easy Frame</a>
                                </td>
                                <td>设置:hover时文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-danger</code></td>
                                <td>
                                    <a href="#" class="e-font-danger e-font-hover-danger">Easy Frame</a>
                                </td>
                                <td>设置:hover时文字颜色</td>
                            </tr>
                            <tr>
                                <td><code>e-font-invalid</code></td>
                                <td>
                                    <a href="#" class="e-font-invalid e-font-hover-invalid">Easy Frame</a>
                                </td>
                                <td>设置:hover时文字颜色</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="card">
                    <div class="card-head">
                        <div class="card-head-label">
                            <h3 class="card-head-title">
                                Background Color
                            </h3>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table background-demo">
                            <thead>
                            <tr>
                                <th>class</th>
                                <th>示例</th>
                                <th>说明</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><code>e-bg-brand</code></td>
                                <td>
                                    <span class="e-bg-brand"></span>
                                </td>
                                <td>设置背景色</td>
                            </tr>
                            <tr>
                                <td><code>e-bg-light</code></td>
                                <td>
                                    <span class="e-bg-light"></span>
                                </td>
                                <td>设置背景色</td>
                            </tr>
                            <tr>
                                <td><code>e-bg-dark</code></td>
                                <td>
                                    <span class="e-bg-dark"></span>
                                </td>
                                <td>设置背景色</td>
                            </tr>
                            <tr>
                                <td><code>e-bg-primary</code></td>
                                <td>
                                    <span class="e-bg-primary"></span>
                                </td>
                                <td>设置背景色</td>
                            </tr>
                            <tr>
                                <td><code>e-bg-success</code></td>
                                <td>
                                    <span class="e-bg-success"></span>
                                </td>
                                <td>设置背景色</td>
                            </tr>
                            <tr>
                                <td><code>e-bg-info</code></td>
                                <td>
                                    <span class="e-bg-info"></span>
                                </td>
                                <td>设置背景色</td>
                            </tr>
                            <tr>
                                <td><code>e-bg-warning</code></td>
                                <td>
                                    <span class="e-bg-warning"></span>
                                </td>
                                <td>设置背景色</td>
                            </tr>
                            <tr>
                                <td><code>e-bg-danger</code></td>
                                <td>
                                    <span class="e-bg-danger"></span>
                                </td>
                                <td>设置背景色</td>
                            </tr>
                            <tr>
                                <td><code>e-bg-invalid</code></td>
                                <td>
                                    <span class="e-bg-invalid"></span>
                                </td>
                                <td>设置背景色</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>